<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>激光打印机管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios/axios.min.js"></script>
    <script src="/js/qs/qs.min.js"></script>
    <script src="/js/elementui/index.js"></script>
</head>

<body>
<p>打印机管理页面</p>
<div id="app">
    查询打印机：<input type="text" placeholder="输入打印机编号" v-model="search" @input="offSearch">
    <el-button type="primary" icon="el-icon-search" @click="searchPrinter">查询</el-button>
    <div style="border: solid 1px darkgrey;line-height: 60px">
        <el-button type="warning" icon="el-icon-check" vertical-align="middle" @click="dialogFormVisible=true">添加打印机
        </el-button>
        <el-button type="danger" icon="el-icon-delete" @click="printerDeletes">批量删除</el-button>
    </div>
    <!--数据表格-->
    <template>
        <el-table
                :data="printerTableData"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column
                    prop="pnum"
                    label="打印机编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="pserver"
                    label="服务器"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="pdescribe"
                    label="描述">
            </el-table-column>
            <el-table-column
                    prop="ptype"
                    label="可打型号">
            </el-table-column>
            <el-table-column
                    prop="pip"
                    label="IP地址">
            </el-table-column>
            <el-table-column
                    prop="pline"
                    label="责任产线">
            </el-table-column>
            <el-table-column
                    prop="premark"
                    label="备注">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            @click="printerEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            icon="el-icon-delete"
                            type="warning"
                            @click="printerDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <!--添加修改弹出框-->
    <el-dialog title="添加打印机" :visible.sync="dialogFormVisible" @close="clearPrinter">
        <el-form :model="printer" ref="printer">
            <el-form-item label="打印机编号" :label-width="formLabelWidth">
                <el-input v-model="printer.pnum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="服务器" :label-width="formLabelWidth">
                <el-input v-model="printer.pserver" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="printer.pdescribe" autocomplete="off"></el-input>
            </el-form-item>
            可打型号：
            <el-select v-model="printer.ptype" clearable placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-form-item label="IP地址" :label-width="formLabelWidth">
                <el-input v-model="printer.pip" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="责任产线" :label-width="formLabelWidth">
                <el-input v-model="printer.pline" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="printer.premark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="savePrinter">确 定</el-button>
        </div>
    </el-dialog>

    <!--分页-->
    <el-pagination
            background
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                printerTableData: null,//表数据
                total: 0,//总条数
                pageSize: 5,//每条页数
                current: 1,//当前页
                formLabelWidth: '120px', // 表单宽度
                dialogFormVisible: false,//弹出框隐藏
                printer: {
                    id: '',
                    pnum: '',
                    pserver: '',
                    pdescribe: '',
                    ptype: '',
                    pip: '',
                    pline: '',
                    premark: ''
                },
                options: [{
                    value: '48VASD,48VIIS',
                    label: '48VASD,48VIIS'
                }, {
                    value: '48VTHT,48VFFR',
                    label: '48VTHT,48VFFR'
                }, {
                    value: '64VTHT,64VFFR',
                    label: '64VTHT,64VFFR'
                }, {
                    value: '48VASA,48VDSD',
                    label: '48VASA,48VDSD'
                }],
                multipleSelection: [],
                search: '', // 搜索关键字
                searchOn: false // 搜索开关
            }
        },
        mounted() {
            this.loadPage(1);
        },
        methods: {
            //加载当前页
            loadPage(current) {
                if (this.searchOn == false) {
                    axios.get('/printers', {
                        params: {
                            current
                        }
                    }).then(value => {
                        if (value.data.code == 1) {
                            this.current = value.data.data.current;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.printerTableData = value.data.data.records;
                        }
                    })
                }else {
                    axios.get('/printers/search', {
                        params: {
                            search: this.search,
                            current: current
                        }
                    }).then(value => {
                        if (value.data.code == 1) {
                            this.current = value.data.data.current;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.printerTableData = value.data.data.records;
                        }
                    })
                }
            },
            // 显示修改对话框
            printerEdit(index, row) {
                this.printer.id = row.id;
                this.printer.pnum = row.pnum;
                this.printer.pserver = row.pserver;
                this.printer.pdescribe = row.pdescribe;
                this.printer.ptype = row.ptype;
                this.printer.pip = row.pip;
                this.printer.pline = row.pline;
                this.printer.premark = row.premark;
                // 显示修改对话款
                this.dialogFormVisible = true;
            },
            //添加或修改打印机
            savePrinter() {
                if (this.printer.id == '') {//添加
                    axios.post('/printer', this.printer).then(value => {
                        this.dialogFormVisible = false;
                        this.loadPage(1);
                    })
                } else {//修改
                    axios.patch('/printer', this.printer).then(value => {
                        this.dialogFormVisible = false;
                        this.loadPage(1);
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    })
                }
            },
            //清空Printer
            clearPrinter() {
                for (let key in this.printer){
                    this.printer[key] = '';
                }
            },
            //单点删除
            printerDelete(index, row) {
                if (confirm("是否删除？")) {
                    axios.delete('/printer/' + row.id).then(value => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.loadPage(1);
                    })
                }
            },
            //批量删除
            printerDeletes() {
                if (this.multipleSelection.length > 0) {
                    var ids = [];
                    this.multipleSelection.forEach(item => {
                        ids.push(item.id);
                    });
                    if (confirm("是否批量删除？")) {
                        axios.post('/printer/deletes', ids).then(value => {
                            this.$message({
                                message: '批量删除成功',
                                type: 'success'
                            });
                            this.loadPage(1);
                        });
                    } else {
                        this.loadPage(1);
                    }
                } else {
                    this.$message({
                        message: '请先选择要删除选项',
                        type: 'warning'
                    })
                }
            },
            //选择触发
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log("这是val:")
                console.log(val);
            },
            // 搜索打印机
            searchPrinter() {
                if (this.search != '') {
                    this.searchOn = true;
                    this.loadPage(1);
                }
            },
            // 清除输入框触发，停止搜索
            offSearch() {
                if (this.search == '') {
                    this.searchOn = false;
                    this.loadPage(1);
                }
            }
        }
    })
</script>
</html>